import React from "react";
import { Layout, Menu, Dropdown, Avatar, message ,Icon} from "antd";
import { withRouter } from "react-router-dom";
import logo from "../img/login.jpg";
import { adminRoutes } from "../routes";
import "./index.css";
import { del } from "../utils/auth";
// import { Icon } from "@ant-design/icons";

// 过滤路由，是否展示
const routes = adminRoutes.filter((route) => route.isShow);
const { Header, Content, Footer, Sider } = Layout;

function index(props) {
  const menus = (
    <Menu
      onClick={(p) => {
        if (p.key === "3") {
          del();
          props.history.push("/login");
        } else if (p.key === "2") {
          message.info("正在开发中");
        } else {
          message.info("正在马不停蹄的开发中");
        }
      }}
    >
      <Menu.Item key="1">通知中心</Menu.Item>
      <Menu.Item key="2">设置</Menu.Item>
      <Menu.Item key="3">退出</Menu.Item>
    </Menu>
  );

  return (
    <Layout>
      <Header className="header">
        <div className="logo">
          <img src={logo} alt="logo" style={{ width: "50px" }} />
        </div>

        <Dropdown overlay={menus}>
          <div>
            <Avatar>DS</Avatar>
            <span> 超级管理员</span>
            <Icon type="down" />
          </div>
        </Dropdown>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
          >
            {routes.map((route) => {
              return (
                <Menu.Item
                  key={route.path}
                  onClick={(p) => props.history.push(p.key)}
                >
                  <Icon type={route.icon} />
                  {route.title}
                </Menu.Item>
              );
            })}
          </Menu>
        </Sider>
        <Layout style={{ padding: "16px" }}>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 640,
            }}
          >
            {props.children}
          </Content>
          <Footer style={{ textAlign: "center" }}>
            My Design ©2020 Created by Senlay UED
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default withRouter(index);
